<template>
    <div>
        <!-- 品类页面 -->
        <!-- 品类标题 -->
        <van-tabs v-model="active" @click="Categorylist">
            <van-tab v-for="item in brotherCategory" :key="item.id" :title="item.name" :name="item.id">
                <div class="title">
                    <h3>{{item.name}}</h3>
                    <p>{{item.front_desc}}</p>
                </div>
            </van-tab>
        </van-tabs>
        <!-- 品类商品 -->
        <Products :goodsList="goodsList" />
                
        
    </div>
</template>

<script>
import {ZCategoryApi,ZCategorylistApi} from "../request/api"
import Products from "../components/Products.vue"
export default {
    data () {
        return {
              active: 1,  //跳转到这个的页面的商品id
              brotherCategory:[],//标题栏种类数组
              currentCategory:[],//当前某个种类
              goodsList:[],//产品列表
              categoryId:"",//类别id
              page:1,//页数
              size:1000,//每页个数
        }
    },
    components:{
        Products
    },
    created(){
        let myid =this.$route.query.id
        //页面初始化渲染标题
        ZCategoryApi({
            id:myid
        }).then(res=>{
            if(res.errno===0){
                let {brotherCategory,currentCategory} =res.data;
                this.active=currentCategory.id
                this.brotherCategory=brotherCategory;
                this.currentCategory=currentCategory;
                
            }
        });
        //页面初始化渲染品类页
            ZCategorylistApi({
                categoryId:myid,
                page:this.page,
                size:this.size,
            }).then(res=>{
                if(res.errno===0){
                let {goodsList} =res.data;
                this.goodsList=goodsList;               
            }
            })
    },
    methods:{
        //点击更换品类页面
        Categorylist(name){
            console.log(name);
        ZCategoryApi({
            id:name
        }).then(res=>{
            if(res.errno===0){
                let {brotherCategory,currentCategory} =res.data;
                this.active=currentCategory.id
                this.brotherCategory=brotherCategory;
                this.currentCategory=currentCategory;  
            }
        });
            ZCategorylistApi({
                categoryId:name,
                page:this.page,
                size:this.size,
            }).then(res=>{
                if(res.errno===0){
                    let {goodsList} = res.data
                    this.goodsList = goodsList
                }
            })
        }
    }
}
</script>
 
<style lang = "less" scoped>
    .title{
        text-align: center;
        margin: 5px 0;
        h3{
            margin-top: 10px;
        }
        p{
            margin-top: 15px;
            font-size: 14px;
            color: rgb(102, 102, 102);
        }
    }
</style>